<template>
    <div class="appointment-setting">
        <div class="setting">
            <div class="items">
                <div class="title">开放时间设置</div>
                <el-checkbox-group v-model="week" @change="changeWeeks">
                    <el-checkbox :label="list.value" v-for="(list,index) in weeks" :key="index">{{list.name}}
                    </el-checkbox>
                </el-checkbox-group>
                <div class="time-picker mt10">
                    <el-time-picker
                        size="small"
                        class="short"
                        :editable="false"
                        :prefix-icon="' '"
                        v-model="startTime"
                        :value-format="'HH:mm'"
                        :picker-options="{
                                selectableRange: `06:00:00 -${endTime ? endTime+':00' : '23:00:00'}`,
                            }"
                        :format="'HH:mm'"
                        placeholder="开始时间">
                    </el-time-picker>
                    <span class="ml10 mr10">-</span>
                    <el-time-picker
                        size="small"
                        class="short"
                        :editable="false"
                        :prefix-icon="' '"
                        :picker-options="{
                                selectableRange: `${startTime ? startTime+':00' : '06:00:00'}-23:00:00`,
                            }"
                        v-model="endTime"
                        :value-format="'HH:mm'"
                        :format="'HH:mm'"
                        placeholder="结束时间">
                    </el-time-picker>
                </div>
            </div>
            <div class="items">
                <div class="title">预约限量设置</div>
                <div>
                    <el-input-number v-model="day" :min="1" :max="10000" size="small" :controls="false"
                                     class="short no-ml"></el-input-number>
                    天内，可预约口罩数
                    <!--                <el-input v-model="day" size="small" class="short" @blur="blurChange('day', 30)" type="number"></el-input>-->
                    <el-input-number v-model="count" :min="1" :max="36500" size="small" :controls="false"
                                     class="short"></el-input-number>
                    个
                </div>
            </div>
        </div>
        <div class="buttons">
            <el-button type="primary" class="submit" @click="submit">保存</el-button>
        </div>
        <div class="tips">注：设置“预约限量”时，不可在“开放时间设置”的日期时间内设置，否则会影响线上预约情况</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                month: '',
                count: '',
                day: '',
                monthOptions: [
                    {
                        label: '一个月',
                        value: ''
                    }
                ],
                weeks: [
                    {
                        name: '周一',
                        checked: false,
                        value: '1'
                    },
                    {
                        name: '周二',
                        checked: false,
                        value: '2'
                    },
                    {
                        name: '周三',
                        checked: false,
                        value: '3'
                    },
                    {
                        name: '周四',
                        checked: false,
                        value: '4'
                    },
                    {
                        name: '周五',
                        checked: false,
                        value: '5'
                    },
                    {
                        name: '周六',
                        checked: false,
                        value: '6'
                    },
                    {
                        name: '周日',
                        checked: false,
                        value: '0'
                    }
                ],
                week: [],
                startTime: '',
                endTime: ''
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.$http.get('/appointmentRules/getAppointDate').then(result => {
                    if (result.success) {
                        if (result.data.appointmentWeek) this.week = result.data.appointmentWeek.split(',')
                        if (result.data.appointmentTime) {
                            this.startTime = result.data.appointmentTime.split('~')[0]
                            this.endTime = result.data.appointmentTime.split('~')[1]
                        }
                        this.day = result.data.overdueDate
                        this.count = result.data.limitationCount
                    }
                })
            },
            blurChange(obj, num) {
                if (!this[obj]) this[obj] = num
            },
            submit() {
                let appointmentTime = ''
                appointmentTime += (this.startTime || '00:00') + '~'
                appointmentTime += (this.endTime || '23:59')
                if (!this.count) {
                    this.$method.messageBox('alert', '请填写预约限量个数')
                    return
                } else if (!this.day) {
                    this.$method.messageBox('alert', '请填写预约限量天数')
                    return
                } else if (this.week.length < 1) {
                    this.$method.messageBox('alert', '请选择开放时间')
                    return
                }
                this.$nextTick(() => {
                    this.$http.post('/appointmentRules/updateAppointDate', {
                        overdueDate: this.day,
                        limitationCount: this.count,
                        appointmentWeek: this.week.join(','),
                        appointmentTime: appointmentTime
                    }).then(result => {
                        if (result.success) {
                            this.$method.messageBox('alert', '设置修改成功')
                        }
                    })
                })
            },
            changeWeeks() {

            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .appointment-setting {
        padding: 80px;

        .setting {
            line-height: 32px;

            /deep/ .items {
                margin-bottom: 20px;

                .title {
                    font-weight: bolder;
                    padding: 10px 0;
                }

                .el-checkbox-group {
                    .el-checkbox {
                        margin-right: 20px;
                    }
                }

                .el-date-editor {
                    .el-input__inner {
                        padding-left: 10px;
                        padding-right: 10px;
                    }

                    &.short {
                        width: 100px;
                    }
                }

                .el-input-number {
                    display: inline-block;
                    width: 120px;
                    margin: 0 6px;

                    &.short {
                        width: 60px;

                        input {
                            padding: 0 5px;
                            text-align: center;
                        }
                    }

                    &.no-ml {
                        margin-left: 0;
                    }
                }
            }
        }

        .buttons {
            margin-top: 50px;
            /*padding-left: 185px;*/

            .el-button {
                width: 150px;
            }
        }

        .tips {
            margin-top: 10px;
            font-size: 13px;
            color: #999;
        }
    }
</style>
